<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="重要信息" name="first">

        <el-form ref="baseForm" :model="baseFormData" :rules="baseFormRules" size="mini" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="baseFormData.phone" placeholder="请输入手机号" :maxlength="11" show-word-limit clearable
                  prefix-icon='el-icon-mobile' :style="{ width: '100%' }"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="身份证号" prop="idCard" >
                <el-input v-model="baseFormData.idCard" placeholder="请输入身份证号" clearable :style="{ width: '100%' }" disabled readonly="true">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出生日期" prop="birthday">
                <el-date-picker v-model="baseFormData.birthday" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                  :style="{ width: '100%' }" placeholder="请选择出生日期" clearable></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="中国农业银行卡号" prop="xhk">
                <el-input v-model="baseFormData.xhk" placeholder="请输入中国农业银行卡号" clearable :style="{ width: '100%' }">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开户行" prop="bankAddr">
                <el-input v-model="baseFormData.bankAddr" placeholder="请输入开户行" clearable :style="{ width: '100%' }">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item size="mini">
                <el-button type="primary" @click="submitBaseForm">提交</el-button>
                <el-button @click="resetBaseForm">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <div style="border-bottom: 1px dotted lightskyblue;margin-bottom: 0.5rem;"></div>
        <el-form size="mini" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="学院" prop="phone">
                <el-input v-model="infoView.deptName" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">

              <el-form-item label="专业" prop="majorName">
                <el-input v-model="infoView.majorName" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="班级" prop="idCard">
                <el-input v-model="infoView.className" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学号" prop="birthday">
                <el-input v-model="infoView.stuNo" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="姓名" prop="birthday">
                <el-input v-model="infoView.stuName" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="年级" prop="birthday">
                <el-input v-model="infoView.gradeName" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="辅导员" prop="birthday">
                <el-input v-model="infoView.teacherName" readonly></el-input>
              </el-form-item>
            </el-col>

          </el-row>

        </el-form>

      </el-tab-pane>

      <el-tab-pane label="其他信息" name="fourth">
        <el-form ref="extraForm" size="mini" :model="extraForm" :rules="extraFormRules" label-width="120px">
          <el-row>


            <el-col :span="6">
              <el-form-item label="白底照片" prop="whitePhoto">
                <image-upload @handleError="handleWhiteError" v-model="extraForm.whitePhoto" :limit="1" />
                <el-button size="mini" @click="extraPhotoV = !extraPhotoV;">其他照片</el-button>
              </el-form-item>
            </el-col>
            <el-dialog width="900px" title="其他照片" :visible.sync="extraPhotoV">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="日常照片" prop="dailyPhoto">
                    <image-upload v-model="extraForm.dailyPhoto" :limit="1" />
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="红底照片" prop="redPhoto">
                    <image-upload v-model="extraForm.redPhoto" :limit="1" />
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="蓝底照片" prop="bluePhoto">
                    <image-upload v-model="extraForm.bluePhoto" :limit="1" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-button type="primary" @click="submitExtraForm">保存</el-button>
            </el-dialog>

            <el-col :span="8">
              <el-form-item label="民族" prop="mz">
                <el-select v-model="extraForm.mz" placeholder="请选择民族">
                  <el-option v-for="(v, i) in mz_list" :key="i" :label="v" :value="v"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="政治面貌" prop="zzmm">
                <el-select v-model="extraForm.zzmm" placeholder="请选择政治面貌">
                  <el-option v-for="(v, i) in zzmm_list" :key="i" :label="v.name" :value="v.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="血型" prop="xx">
                <el-select v-model="extraForm.xx" placeholder="请选择血型">
                  <el-option v-for="(v, i) in xx_list" :key="i" :label="v" :value="v"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="考生号" prop="ksh">
                <el-input readonly v-model="extraForm.ksh" disabled/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="籍贯" prop="jg">
                <el-cascader :options="areaOptions" v-model="jg" clearable filterable style="width: 100%" @change="(val) => {
                  extraForm.jg = val[0] + ' ' + (val[1] == '市辖区' ? '' : val[1]) + ' ' + val[2];
                }"></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="户口性质" prop="hkxz">
                <el-radio-group v-model="extraForm.hkxz">
                  <el-radio :label="'城镇'">城镇</el-radio>
                  <el-radio :label="'农村'">农村</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>

            <el-col :span="8">
              <el-form-item label="户口所在地" prop="hkszd">
                <el-cascader :options="areaOptions" v-model="hkszd" clearable filterable style="width: 100%" @change="(val) => {
                  extraForm.hkszd = val[0] + (val[1] == '市辖区' ? '' : val[1]) + val[2];
                  extraForm.hksz1 = val[0];
                  extraForm.hksz2 = val[1];
                  extraForm.hksz3 = val[2];
                }"></el-cascader>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="户口所在省" prop="hksz1">
                <el-input v-model="extraForm.hksz1" placeholder="请输入户口所在省" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="户口所在市/区" prop="hksz2">
                <el-input v-model="extraForm.hksz2" placeholder="请输入户口所在市/区" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="户口所在区/县" prop="hksz3">
                <el-input v-model="extraForm.hksz3" placeholder="请输入户口所在区/县" />
              </el-form-item>
            </el-col> 

            <el-col :span="8">
              <el-form-item label="户口所在地区县以下详细地址" prop="hkxxdz" label-width="200px">
                <el-input v-model="extraForm.hkxxdz" type="textarea" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
              <el-form-item label="学生居住地址" prop="xsjzdz">
                <el-input v-model="extraForm.xsjzdz" type="textarea" placeholder="请输入学生居住地址" />
              </el-form-item>
            </el-col> -->
            <el-col :span="8">
              <el-form-item label="所属派出所" prop="sspcs">
                <el-input v-model="extraForm.sspcs" placeholder="请输入所属派出所" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="所属街道" prop="ssjd">
                <el-input v-model="extraForm.ssjd" placeholder="请输入所属街道" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="乘火车区间" prop="chcqj">
                <el-input v-model="extraForm.chcqj" placeholder="请输入乘火车区间 例如(南宁站-柳州站)" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="详细联系地址" prop="xxlxdz">
                <el-input v-model="extraForm.xxlxdz" placeholder="请输入详细联系地址" />
              </el-form-item>
            </el-col>

            <!-- <el-col :span="8">
              <el-form-item label="邮政编码" prop="yzbm">
                <el-input v-model="extraForm.yzbm" placeholder="请输入邮政编码" />
              </el-form-item>
            </el-col> -->

            <el-col :span="8">
              <el-form-item label="现家庭地址" prop="xjtdz">
                <el-input v-model="extraForm.xjtdz" placeholder="请输入现家庭地址" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="邮政编码" prop="jtyzbm">
                <el-input v-model="extraForm.jtyzbm" placeholder="请输入家庭邮政编码" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="家庭电话" prop="jtdh">
                <el-input v-model="extraForm.jtdh" placeholder="请输入家庭电话" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item size="mini">
                <el-button type="primary" @click="submitExtraForm">提交</el-button>
                <el-button @click="resetExtraForm">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="家庭成员" name="second">
        <FamilyMember />
      </el-tab-pane>
      <el-tab-pane label="教育经历" name="third">
        <EduExp />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  fullLoading,
  isEmpty,
  isValidPostalCode,
  mz_list,
  xx_list,
  zzmm_list
} from "@/api/helpFunc";
import {
  changeOwnInfo,
  getOwnInfo
} from "@/api/stuCQS/basedata/student";

import {
  getOwnInfo as getOwnInfoView
} from "@/api/stuCQS/basedata/stuInfoView";

import {
  getOwnInfo as getExtraInfo,
  submitOwnInfo as submitExtraInfo
} from "@/api/stuCQS/basedata/extraInfo";

import {
  pcaTextArr
} from 'element-china-area-data';

import {
  alipayVali
} from "@/api/helpFunc/bank";

import EduExp from "@/views/basedata/private/components/EduExp.vue";
import FamilyMember from "@/views/basedata/private/components/FamilyMember.vue";


export default {
  components: {
    FamilyMember,
    EduExp
  },
  data() {
    return {
      mz_list,
      zzmm_list,
      xx_list,

      extraPhotoV: false,

      hkszd: [],
      jg: [],

      areaOptions: pcaTextArr,

      activeName: 'first',


      baseFormData: {
        phone: '',
        xhk: "",
        idCard: "",
        birthday: null,
        bankAddr: ""
      },
      baseFormRules: {
        phone: [{
          required: true,
          message: '请输入手机号',
          trigger: 'blur'
        }, {
          pattern: /^1(3|4|5|7|8|9)\d{9}$/,
          message: '手机号格式错误',
          trigger: 'blur'
        }],
        xhk: [{
          required: true,
          message: '请输入中国农业银行卡号',
          trigger: 'blur'
        }],
        bankAddr: [{
          required: true,
          message: '请输入开户行',
          trigger: 'blur'
        }],
        idCard: [{
          required: true,
          message: '请输入身份证号',
          trigger: 'blur'
        }],
        birthday: [{
          required: true,
          message: '请选择出生日期',
          trigger: 'change'
        }],
      },

      family_list: [],

      edu_list: [],


      extraForm: {},
      // 表单校验
      extraFormRules: {
        mz: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        zzmm: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        xx: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        hkxz: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        hkszd: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        hksz1: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        hksz2: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        hksz3: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        hkxxdz: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        // xsjzdz: [
        //   { required: true, message: '必填项', trigger: 'blur' }
        // ],
        sspcs: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        ssjd: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        chcqj: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        xxlxdz: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        // yzbm: [
        //   { required: true, message: '必填项', trigger: 'blur' }
        // ],
        xjtdz: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        jtyzbm: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        jtdh: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
      },

      infoView: {

      }


    };
  },
  created() {
    this.activeName = this.$route.params.activeName ? this.$route.params.activeName : "first";
    this.getOwnInfoView();
    this.getExtraInfo();
    this.getOwnInfo();
  },
  methods: {

    handleWhiteError(message){
        this.$confirm(message, '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'error'
                  })
    },
    async getOwnInfoView() {
      let res = await getOwnInfoView();
      if (res.code == 200) {
        if (!isEmpty(res.data)) {
          this.infoView = {
            ...res.data
          };
        }
      }
    },
    async getExtraInfo() {
      let res = await getExtraInfo();
      if (res.code == 200) {
        if (!isEmpty(res.data)) {
          this.extraForm = {
            ...res.data
          };

          this.hkszd = [this.extraForm.hksz1, this.extraForm.hksz2, this.extraForm.hksz3];
          let tempJg = this.extraForm.jg.split(' ');
          if (!isEmpty(tempJg)) {
            if (tempJg[1] == '') {
              tempJg[1] = "市辖区";
            }
            this.jg = [...tempJg];
          }
        }
      }

    },

    async getOwnInfo() {
      let res = await getOwnInfo();
      if (res.code == 200) {
        if (!isEmpty(res.data)) {
          let data = {
            ...res.data
          };
          this.baseFormData.phone = data.phone;
          this.baseFormData.xhk = data.xhk;
          this.baseFormData.idCard = data.idCard;
          this.baseFormData.birthday = data.birthday;
          this.baseFormData.bankAddr = data.bankAddr;
        }
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },

    submitExtraForm() {

      this.$refs['extraForm'].validate(async valid => {
        if (!valid) return;
        let sdata = {
          ...this.extraForm
        };

        // if (!isValidPostalCode(sdata.yzbm)) {
        //   this.$message.info("请输入正确的邮政编码");
        //   return;
        // }

        if (!isValidPostalCode(sdata.jtyzbm)) {
          this.$message.info("请输入正确的家庭邮政编码");
          return;
        }

        if (sdata.jtdh == this.baseFormData.phone) {
          this.$message.info("家庭电话不能与本人电话相同");
          return;
        }

        let loading = fullLoading(this);
        let res = await submitExtraInfo(sdata);
        loading.close();
        if (res.code == 200) {
          this.$message.success(res.msg);
        }
      })
    },
    resetExtraForm() {
      this.$refs['extraForm'].resetFields()
    },


    submitBaseForm() {
      this.$refs['baseForm'].validate(async valid => {
        if (!valid) return
        let sdata = {
          ...this.baseFormData
        };
        sdata.xhk = sdata.xhk.replace(" ", "");

        let card = sdata.xhk;
        let boolCard = await alipayVali(card);
        if (boolCard.validated == false) {
          this.$message.info("请输入正确的银行卡号");
          return;
        }
        /*if (boolCard.bank != "ABC") {
          this.$message.info("请输入正确的中国农业银行银行卡号");
          return;
        }*/

        let loading = fullLoading(this);
        let res = await changeOwnInfo(sdata);
        loading.close();
        if (res.code == 200) {
          this.$message.success(res.msg);
        }
      })
    },
    resetBaseForm() {
      this.$refs['baseForm'].resetFields()
    },


    addEduRow() {

    }
  }
};
</script>
